import React,{useEffect} from 'react'
import * as echarts from 'echarts'

export default function ChartBar(props) {
  const {optionsData = null, id = 'default-id', width = 600, height = 200,title,seriesName} = props;
 
  useEffect(() => {
    let xdata=optionsData.xkey
    let y1data=optionsData.y1key
    let y2data=optionsData.y2key
    let y3data=optionsData.y3key
    //初始化echarts
    var myChart = echarts.init(document.getElementById(id))
    var options={
      xAxis: {
        data: xdata
      },
      tooltip:{
        trigger:'axis',
        triggerOn:'click',
        formatter:`{b}的{a}是{c}`
      },
      toolbox:{
        feature:{
          saveAsImage:{
            name:'giles的下载'
          },
          restore:{},
          dataZoom:{},
          dataView:{},
          magicType:{
            type:['line', 'bar', 'stack']
          }
        }
      },
      legend:{
        data: ['1月份销量', '2月份销量', '3月份销量']
      },
      yAxis: {
        
      },
      series: [
        {
          name: '1月份销量',
          type: 'bar',
          data:y1data,
          markPoint:{
            data:[
              {
                type:'max'
              },
              {
                type:'min'
              }
            ]
          },
          markLine:{
            data:[
              {
                type:'average'
              }
            ]
          },
          label:{
            show:true,
            color:'yellow',
            rotate:65,
            shadowColor:'#f00',
            shadowOffsetX:5,
            shadowOffsetY:5,
            shadowBlur:5,
            backgroundColor:'#f00',
            position:'top'
          },
          itemStyle:{
            color:'springgreen',
            borderColor:'orange',
            opacity:.5
          },
          barWidth:20
        },
        {
          name:'2月份销量',
          type:'bar',
          data:y2data,
          barWidth:20
        },
        {
          name:'3月份销量',
          type:'bar',
          data:y3data,
          barWidth:20
        }
      ],
      title:{
        text:'淘宝某店全年销量统计',
        link:'http://www.zhaijizhe.cn',
        subtext:'12月份销量',
        textStyle:{
          color:'#f78798',
          fontStyle:'italic',
          fontFamily:'宋体'
        }
      }
    }
    myChart.setOption(options);
  })
  return (
    <div id={id} style={{width: width, height: height}}>222</div>
  )
}
